<!-- eslint-disable prettier/prettier -->
<template>
  <div class="container">
    <Breadcrumb :items="['menu.department', '角色管理']" />
    <div class="content">
      <a-layout>
        <a-layout-header>
          <div class="plusUser">
            <a-button type="primary" shape="round">
              <template #icon>
                <icon-plus />
              </template>
              添加
            </a-button>
          </div>
        </a-layout-header>
        <a-layout>
          <a-layout-sider>
            <a-space direction="vertical" size="large" class="search">
              <a-input-search :style="{width:'320px'}" placeholder="请输入公司名称" search-button/>
            </a-space>
            <a-tree blockNode :data="treeData" />
          </a-layout-sider>
          <a-layout-content>
            <a-table
              :columns="columns"
              :data="form.noData ? [] : data"
              :bordered="form.border"
              :hoverable="form.hover"
              :stripe="form.stripe"
              :loading="form.loading"
              :show-header="form.tableHeader"
              :row-selection="form.checkbox ? rowSelection : undefined"
            >
              <template #columns>
                <a-table-column title="头像" data-index="key" />
                <a-table-column title="姓名" data-index="name" />
                <a-table-column title="昵称" data-index="otherName" />
                <a-table-column title="部门" data-index="sort" />
                <a-table-column title="邮箱" data-index="status" />
                <a-table-column title="手机号" data-index="time" />
                <a-table-column title="备注" data-index="email" />
              </template>
            </a-table>
          </a-layout-content>
        </a-layout>
        <!-- <a-layout-footer>Footer</a-layout-footer> -->
      </a-layout>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue"
const treeData = [
  {
    title: "上海xxx公司",
    key: "0-0",
    children: [
      {
        title: "深圳总公司",
        key: "0-0-0",
        children: [
          {
            title: "研发部门",
            key: "0-0-0-0"
          },
          {
            title: "市场部门",
            key: "0-0-0-1"
          }
        ]
      },
      {
        title: "长沙分公司",
        key: "0-0-1",
        children: [
          {
            title: "Leaf",
            key: "0-0-1-0"
          }
        ]
      }
    ]
  }
]
const form = reactive({
  border: true,
  borderCell: false,
  hover: true,
  stripe: true,
  checkbox: true,
  loading: false,
  tableHeader: true,
  noData: false
})

const rowSelection = reactive({
  type: "checkbox",
  showCheckedAll: true
})

const columns = [
  {
    title: "序号",
    dataIndex: "key"
  },
  {
    title: "角色名称",
    dataIndex: "name"
  },
  {
    title: "别名",
    dataIndex: "otherName"
  },
  {
    title: "排序",
    dataIndex: "sort"
  },
  {
    title: "状态",
    dataIndex: "status"
  },
  {
    title: "创建时间",
    dataIndex: "time"
  },
  {
    title: "备注",
    dataIndex: "email"
  }
]

const data = [
  {
    key: "1",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "2",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "3",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "4",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "5",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  }
]
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
.content {
  margin: 10px;
}
.plusUser {
  float: right;
  margin-bottom: 10px;
}
.search {
  margin: 10px 10px;
  background-color: #fff;
  .arco-input-outer {
    width: 180px !important;
  }
  .arco-space-item {
    width: 180px !important;
  }
}
</style>
